import { ProCard } from "@ant-design/pro-components"
import { Affix, Breadcrumb, Button, Input, Table } from "antd";
import { ColumnsType } from "antd/lib/table";
import { useEffect, useState } from "react";
import { NavLink, useDispatch, useSelector, ViewState } from "umi";
import styles from "./styles.less";


//表格数据与格式
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: 'URL',
    dataIndex: 'name',
    fixed: 'left',
    width: '100px'
  },
  {
    title: 'IP',
    dataIndex: 'age',
  },
  {
    title: '浏览器',
    dataIndex: 'address',
  },
  {
    title: '内核',
    dataIndex: 'address',
  },
  {
    title: '操作系统',
    dataIndex: 'address',
  },
  {
    title: '设备',
    dataIndex: 'address',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
  {
    title: '访问量',
    dataIndex: 'address',
  },
  {
    title: '访问时间',
    dataIndex: 'address',
  },
  {
    title: '操作',
    fixed: 'right',
    width: 100,
    render: () => <a>删除</a>,
  },
];

const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

export default function Index() {
  const Dispatch = useDispatch();


  //表格
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [loading, setLoading] = useState(false);

  const start = () => {
    setLoading(true);
    // ajax request after empty completing
    setTimeout(() => {
      setSelectedRowKeys([]);
      setLoading(false);
    }, 1000);
  };

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;
  useEffect(() => {
    Dispatch({
      type: "views/view",
      payload: {
        page: 1,
        pageSize: 12
      }
    })
  }, []);
  const {viewList} = useSelector((state: { views:any}) => {
    return state.views
  })
  console.log(viewList,"123456132");
  
  return (
    <div className={styles.view}>
      <div className={styles.header}>
        <Affix>
          <ProCard >
            <Breadcrumb>
              <Breadcrumb.Item><NavLink to='/home'>工作台</NavLink></Breadcrumb.Item>
              <Breadcrumb.Item><NavLink to='/view'>访问统计 </NavLink></Breadcrumb.Item>
              {/* <Breadcrumb.Item><NavLink to='/form/advanced-form'>标签管理 </NavLink></Breadcrumb.Item> */}
            </Breadcrumb>
          </ProCard>
        </Affix>
      </div>
      <div className={styles.main}>
        <div className={styles.middle}>
          <div className={styles.search}>
            <p>  <span>IP:   </span>   <Input placeholder="Basic usage" /></p>
            <p>  <span>UA:   </span>  <Input placeholder="Basic usage" /></p>
            <p>  <span>IURL: </span>  <Input placeholder="Basic usage" /></p>
            <p>  <span>地址: </span>   <Input placeholder="Basic usage" /></p></div>
          <div className={styles.search}>
            <p> <span>浏览器: </span>   <Input placeholder="Basic usage" /></p>
            <p> <span>I内核:  </span>   <Input placeholder="Basic usage" /></p>
            <p> <span>OS:     </span>   <Input placeholder="Basic usage" /></p>
            <p> <span>设备:   </span>   <Input placeholder="Basic usage" /></p></div>
          <p className={styles.searchs}>
            <Button type="primary">搜索</Button> <Button type="primary">重置</Button>
          </p>
        </div>
        <div className={styles.top}>
          <div style={{ marginBottom: 16 }}>
            <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
              Reload
            </Button>
            <span style={{ marginLeft: 8 }}>
              {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
            </span>
          </div>
          <Table scroll={{ x: 1300 }} rowSelection={rowSelection} columns={columns} dataSource={data} />
        </div>
      </div>
    </div>
  )
}
